<template>
  <div class="wrap">
    <div class="interface">
      <div class="logo">
        <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
      </div>
      <p class="type">账号登陆</p>
      <div class="input">
        <input v-model="name" type="text" placeholder="账号">
        <input v-model="pwd" type="text" placeholder="密码">
        <p class="text">温馨提示：未注册饿了么帐号的手机号，登录时将自动注册，且代表您已同意<a href="#">《用户服务协议》</a></p>
        <button class="btn" @click="login">登录</button>
      </div>
      <h6>关于我们</h6>
    </div>
    <div class="about">

    </div>
  </div>
</template>

<script>
  export default {
    name:'login',
    data () {
      return {
        name:'',
        pwd:''
      }
    },
    methods:{
      login () {
        this.$http.get('http://localhost:3000/reg?name=' + this.name + '&pwd=' + this.pwd).then(function(res){
          if (res.data && res.data.code == 0) {
            alert(res.data.msg);
            this.name = '';
            this.pwd = '';
          } else {
            alert(res.data.msg);
          }
        },function(error){
            console.log(error)
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .wrap{width:100%;padding-top:.6rem;}
  .interface{margin:0 .75rem;}
  .logo svg{width: 2.8rem; height: 1.12rem; position: relative; left:50%; margin-left:-1.4rem;}
  .type{font-size: .25rem; text-align: center; margin-top:.6rem; color: #2395ff;}
  .input input{height: .96rem; width: 100%; border:.01rem solid #ccc; border-radius:.08rem; font-size: .3rem;}
  .text {font-size: .28rem; color: #999; line-height: .4rem; margin-top:.4rem;}
  .text a{color: #2395ff;}
  .btn{width: 100%; background:#00d762; color: #fff; margin-top: .3rem; height: .84rem; border:0; font-size: .32rem; border-radius:.08rem;}
  .interface h6{font-size: .23rem; color: #999; font-weight: normal; text-align: center; margin-top:.6rem;}
</style>
